<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="example-body flex-row-center">
		<view class="" @click="datetimeStartShow=true">
			<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
				placeholder="请选择开始时间" v-model="startTime"></up-input>
		</view>
		<text class="example-icon">-</text>
		<view class="" @click="datetimeEndShow=true">
			<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
				placeholder="请选择结束时间" v-model="endTime"></up-input>
		</view>
	</view>
	<!-- 时间选择组件 -->
	<up-datetime-picker @cancel="datetimeStartShow=false" v-model="startTime" :show="datetimeStartShow"
		@confirm="confirmTime" mode="datetime"></up-datetime-picker>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const startTime = ref(Date.now());
	const endTime = ref(Date.now());
	const datetimeStartShow = ref(false);
	const datetimeEndShow = ref(false);
</script>

<style lang="scss" scoped>
	.example-body {
		border: 1px solid red;
		flex: 1;

		.example-icon {
			font-size: 28rpx;
			color: #fff;
			margin: 0 24rpx;
		}
	}
</style>